import Link from "next/link";
import { signOut } from "@/lib/auth";
import { Separator } from "@/components/ui/separator";
import { User2Icon, LogOutIcon } from "lucide-react";
import UserAvatar from "@/components/custom-ui/user-avatar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { getTranslations } from "next-intl/server";

export default async function User() {
  const t = await getTranslations("common");
  return (
    <Popover>
      <PopoverTrigger asChild>
        <UserAvatar
          className="bg-foreground/5 shadow-[0_0_5px_2px_rgba(0,0,0,0.2)] hover:shadow-[0_0_10px_2px_rgba(0,0,0,0.2)] cursor-pointer"
        />
      </PopoverTrigger>
      <PopoverContent className="w-auto text-muted-foreground">
        <Link
          href={"/profile"}
          className="flex items-center gap-2 hover:text-primary"
        >
          <User2Icon size={14} />
          <div className="text-sm">{t("profile")}</div>
        </Link>
        <Separator className="my-4" />
        <div
          onClick={async () => {
            "use server";
            await signOut({ redirectTo: "/auth/login" });
          }}
          className="flex items-center gap-2 hover:text-primary cursor-pointer"
        >
          <LogOutIcon size={14} />
          <div className="text-sm">{t("logout")}</div>
        </div>
      </PopoverContent>
    </Popover>
  );
}
